<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios入门案例</title>
	</head>
	<body>
		
		<h1>Axios Ajax调用</h1>
		
		<!-- 1.导入js类库 -->
		<script src="../js/axios.js"></script>
		<script>
			
			//1.发起Get请求
			// 原始参数  1: url地址  参数2:提交参数  参数3:回调函数
			// 知识点: 传统的ajax的操作有"回调地狱问题" '闭包' 
			// 回调地狱问题: 由于业务复杂,导致多重的ajax进行嵌套. 如果中间出现任何问题.则导致整个ajax调用失败.
			
			//参数 1: url地址  2.提交的参数
			//跨域请求: 浏览器不能正常执行!!!!
			let url = "http://localhost:8090/hello"
			axios.get(url)
				 .then(function(result){
					 //获取返回值 promise对象
					 console.log(result)
					 //如果需要获取服务器的返回值则使用.data属性
					 console.log(result.data)
				 })
				 
			//2.带参数的get请求
			//url: http://localhost:8090/axios?id=100
			axios.get('http://localhost:8090/axios?id=100')
				 .then(result => {
					 console.log(result.data)
				 })
			
			//3.restFul风格
			axios.get('http://localhost:8090/axios/100')
				 .then(result => {
					 console.log(result.data)
			})
			
			//4.利用params对象的方式传递参数
			axios.get('http://localhost:8090/axiosParams',{
				params : {
					id: 100
				}
			}).then(result => {
					 console.log(result.data)
			})
			
			//注意事项: GET/DELETE语法相同!!!!!
			
			/**
			 * post/put请求的说明:
			 * 	如果采用对象的方式进行数据传输.则发起请求时
			 * 自动的转化为JSON格式进行数据传递!!!!
			 */
			axios.post('http://localhost:8090/addAxios',{
				id: 100,
				name: 'tomcat'
			}).then(result => {
				console.log(result.data)
			})
			
			/**
			 * 通过form表单的方式提交数据
			 */
			//1.定义form表单对象
			let params = new URLSearchParams();
			params.append("id",100)
			params.append("name","tomcat猫")
			
			axios.post('http://localhost:8090/addAxiosForm',params)
			.then(result => {
				console.log(result.data)
			})
			
			/**
			 * post请求的restFul结构
			 */
			axios.post('http://localhost:8090/axios2/100/tomcat')
			.then(result => {
				console.log(result.data)
			})
			 
			
			//1.配置ajax的基本路径
			axios.defaults.baseURL = "http://localhost:8090/"
			//2.添加请求头信息 token 令牌
			axios.defaults.headers.mytoken = '122334455'
			
			axios.get("hello2")
				 .then(function(result){
					 console.log("基本路径的写法优化!!!!")
				 })
			
			
		</script>
	</body>
</html>
